<template>
  <div class="header">
    <div class="header-left">
      <router-link to="/">
        <img class="header-logo" src="../../../assets/img/logo.png" alt="">
      </router-link>
    </div>
    <div class="header-right">
      <input v-model="searchInput" class="header-input" type="text" placeholder="请输入搜索关键字">
      <button class="header-button" @click="searchName"></button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeHeader',
  data () {
    return {
      searchInput: ''
    }
  },
  methods: {
    searchName () {
      this.$router.push({ path: '/list', query: { searchname: this.searchInput } })
    }
  }
}
</script>

<style lang="stylus" scoped>
  .header
    overflow: hidden
    width: 100%
    position: relative
    background: #fff
    .header-left
      width: 23%
      text-align: center
      .header-logo
        max-height: .84rem
        box-sizing: border-box
    .header-right
      position: absolute
      height: .48rem
      top: .16rem
      right: .1rem
      width: 70%
      border-radius: .12rem
      text-indent: .06rem
      border: .02rem solid #c9c9c9
      background: #FFF
      .header-input
        position: absolute
        height: .44rem
        top: 0
        left: 0
        width: 82%
        line-height: .44rem
        text-indent: .1rem
        border: .02rem solid #fff
        background: #fff
        color: #000
        font-size: .26rem
      .header-button
        position: absolute
        right: .3rem
        width: .36rem
        height: .36rem
        top: .06rem
        background: url(../../../assets/img/search_org.png)
        background-size: 100% 100%
        border: 0 none
</style>
